<template>
  <up-modal
    :show="props.show"
    title="身份证图片预览"
    :show-cancel-button="false"
    confirmText="关闭"
    @confirm="handleClose"
  >
    <view class="id-card-preview">
      <view class="user-info">
        <text class="name">{{ props.userName }}</text>
        <text class="id-number">{{ props.idNumber }}</text>
      </view>
      
      <view class="image-container">
        <view class="image-item">
          <view class="image-title">身份证正面</view>
          <image 
            v-if="props.frontImage" 
            :src="props.frontImage" 
            class="id-card-image"
            mode="aspectFit"
            @click="previewImage(props.frontImage)"
          />
          <view v-else class="no-image">暂无图片</view>
        </view>
        
        <view class="image-item">
          <view class="image-title">身份证反面</view>
          <image 
            v-if="props.backImage" 
            :src="props.backImage" 
            class="id-card-image"
            mode="aspectFit"
            @click="previewImage(props.backImage)"
          />
          <view v-else class="no-image">暂无图片</view>
        </view>
      </view>
    </view>
  </up-modal>
</template>

<script setup>
// 定义props
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  userName: {
    type: String,
    default: ''
  },
  idNumber: {
    type: String,
    default: ''
  },
  frontImage: {
    type: String,
    default: ''
  },
  backImage: {
    type: String,
    default: ''
  }
});

// 定义事件
const emit = defineEmits(['update:show']);

// 关闭弹窗
const handleClose = () => {
  emit('update:show', false);
};

// 预览图片
const previewImage = (imageUrl) => {
  if (!imageUrl) return;
  
  uni.previewImage({
    urls: [imageUrl],
    current: imageUrl
  });
};
</script>

<style scoped>
.id-card-preview {
  width: 100%;
  padding: 20rpx;
}

.user-info {
  text-align: center;
  margin-bottom: 30rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 10rpx;
}

.name {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.id-number {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.image-container {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.image-item {
  text-align: center;
}

.image-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.id-card-image {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
  border: 2rpx solid #e0e0e0;
  cursor: pointer;
}

.no-image {
  width: 100%;
  height: 300rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  border: 2rpx dashed #ccc;
  color: #999;
  font-size: 28rpx;
}
</style>